body {
    padding: .6rem 0 0;
}

.red-btn {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 6rem;
    height: .9rem;
    line-height: .9rem;
    font-size: .36rem;
    text-align: center;
    color: #fff;
    border-radius: 1rem;
    background-image: linear-gradient(to top, #e6281b, #f56853);
}

h1,
h3 {
    margin: 0;
    padding: 0;
    font-family: PingFangSC;
    font-weight: 500;
    text-align: center;
    color: #000;
}

h3 {
    height: .5rem;
    font-size: .36rem;
}

h1 {
    height: .67rem;
    font-size: .48rem;
}

.imgae_block {
    margin: .6rem auto .4rem;
    width: 6.75rem;
    height: 4.46rem;
    background: transparent url('../img/navigation_img.png') center/cover;
}

.fearture {
    margin: 0 auto .6rem;
    width: 6.9rem;
    height: 1.95rem;
    ul {
        padding: 0;
        margin: 0;
        margin-right: -.15rem;
        zoom: 1;
        li {
            padding: 0;
            margin: 0;
            list-style: none;
            width: 2.2rem;
            height: 1.95rem;
            font-size: .28rem;
            margin-right: .15rem;
            float: left;
            text-align: center;
            color: #fff;
            border-radius: .16rem;
            span.big {
                font-size: .56rem;
                font-weight: 500;
                width: 100%;
                display: inline-block;
                line-height: 1.28rem;
            }
        }
        li:first-child {
            background-origin: border-box;
            background-clip: content-box, border-box;
            background-image: linear-gradient(#e6281b, #e6281b), linear-gradient(to bottom, #f71d50, #e11639);
        }
        li:nth-child(2) {
            background-color: #f5a623;
        }
        li:last-child {
            background-color: #4a90e2;
        }
    }
}

.step-wrapper {
    padding: 0 .3rem;
    width: 100%;
    text-align: left;
    background-color: #f5f5f3;
    overflow: hidden;
    &>h1 {
        margin: .8rem 0 .6rem;
        height: .67rem;
        font-size: .48rem;
        font-weight: bold;
        text-align: center;
        color: #000;
    }
}

.first-step-content,
.second-step-content,
.third-step-content {
    margin: .7rem auto 0;
    width: 100%;
    height: auto;
    font-size: .24rem;
    overflow: hidden;
    &>p {
        padding: 0 .22rem 0 .66rem;
        margin: .1rem auto .3rem;
        width: 100%;
        line-height: .36rem;
        font-size: .24rem;
        box-sizing: border-box;
    }
}

.step-title {
    font-size: .28rem;
    color: #000;
    &>span {
        display: inline-block;
        margin-right: .2rem;
        width: .48rem;
        height: .48rem;
        text-align: center;
        color: #fff;
        font-weight: normal;
        border-radius: 50%;
        background-color: #5a5a5a;
    }
}

.first-step-content {
    .step-info {
        margin: auto;
        width: 5.28rem;
        height: 4.11rem;
        background: transparent url('../img/step_info_first.png') center/cover no-repeat;
    }
}

.second-step-content {
    ul {
        margin-right: -.32rem;
        padding: 0 .36rem;
    }
    ul>li {
        list-style: none;
        box-sizing: border-box;
        padding: 1.8rem 0 0 0;
        margin: 0 .32rem 0 0;
        width: 1.8rem;
        height: 2.2rem;
        float: left;
        text-align: center;
        line-height: .4rem;
        font-size: 28px;
        color: #000000;
        background: transparent url('../img/img_2_1.png') center top/1.8rem no-repeat;
        &:nth-child(2) {
            background-image: url('../img/img_2_2.png')
        }
        &:nth-child(3) {
            background-image: url('../img/img_2_3.png')
        }
        &:nth-child(4) {
            background-image: url('../img/img_2_4.png')
        }
        &:nth-child(5) {
            background-image: url('../img/img_2_5.png')
        }
        &:nth-child(6) {
            background-image: url('../img/img_2_6.png')
        }
        &:nth-child(7) {
            background-image: url('../img/img_2_7.png')
        }
        &:last-child {
            clear: both;
            float: none;
            margin: auto;
        }
    }
}

.third-step-content {
    width: 100%;
    height: 4.88rem;
    background: transparent url('../img/img_3.png') center ~"1.8rem/4.01rem" 2.48rem no-repeat;
}

.tips {
    width: 100%;
    height: auto;
    margin: 0 0 1.9rem;
    padding: 0 .3rem;
    font-size: .28re;
    line-height: .36rem;
    text-align: left;
    overflow: hidden;
    h2 {
        margin: .8rem 0 .6rem;
        height: .67rem;
        font-size: .48rem;
        text-align: center;
        color: #000;
    }
    p{
        font-size: 24px;
        line-height: 32px;
        margin: 0 0 10px;
        color: #000000; 
    }
}

.scan-now {
    margin-bottom: .6rem;
    &>span {
        padding-left: .46rem;
        background: transparent url('../img/ss_icon.png') left center/.36rem no-repeat;
    }
}